<!-- DHI取样，导入 -->
<template>
    <el-drawer
        :model-value="isShowUpload"
        size="800"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <template #header>
            <strong style="font-weight: bold; color: #000;">导入</strong>
        </template>
        <template #default>
            <!-- <div class="radio-row">
                <el-radio-group v-model="cattleType">
                    <el-radio value="1" size="large">犊牛(0-4月龄)</el-radio>
                </el-radio-group>
                <el-icon color="#999" size="12" class="radio-icon">
                    <Download />
                </el-icon>
                <span class="radio-txt">下载模板</span>
            </div> -->
            <div style="display: flex; justify-content: space-between;">
            <!-- 手动上传按钮 -->
            <el-upload
                class="upload-demo"
                action="/api/cow-dhi/upload-record-list"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="onChange"
            >
                <template #trigger>
                    <el-button icon="Upload" type="primary">导入文件</el-button>
                </template>
            </el-upload>
            <el-button icon="Download" @click="downLoadTemplate">下载模板</el-button>
            </div>
            <el-divider>
                <span>共计<span style="color: red; margin: 0 2px;">{{ tableData.length }}</span>条数据</span>
            </el-divider>
            <el-table :data="tableData" stripe border style="width: 100%; height: calc(100vh - 260px);">
                <el-table-column prop="no" label="序号"  width="80"/>
                <el-table-column prop="cowCode" label="牛号" width="130" />
                <el-table-column prop="birthDate" label="出生日期" width="120" />
                <el-table-column prop="parity" label="胎次(胎)" width="90" />
                <el-table-column prop="samplingDate" label="采样日期" width="120" />
                <el-table-column prop="calvingDate" label="产犊日期" width="120" />
                <el-table-column prop="calvingInterval" label="产犊间隔(天)" width="120" />
                <el-table-column prop="lactationDays" label="泌乳天数(天)" width="120" />
                <el-table-column prop="groupId" label="分组号" width="120" />
                <el-table-column prop="milkProduction" label="产奶量(Kg)" width="120" />
                <el-table-column prop="fatRate" label="乳脂率(%)" width="120" />
                <el-table-column prop="proteinRate" label="蛋白率(%)" width="120" />
                <el-table-column prop="fatProteinRatio" label="脂蛋比" width="120" />
                <el-table-column prop="somaticCellCount" label="体细胞数(万/ml)" width="150" />
                <el-table-column prop="somaticCellGrade" label="体细胞分" width="120" />
                <el-table-column prop="ureaNitrogen" label="尿素氮(mg/dl)" width="150" />
                <el-table-column prop="milkLoss" label="奶损失(Kg)" width="120" />
                <el-table-column prop="milkPriceDifference" label="奶款差" width="120" />
                <el-table-column prop="economicLoss" label="经济损失" width="120" />
                <el-table-column prop="correctedMilk" label="校正奶(Kg)" width="120" />
                <el-table-column prop="persistence" label="持续力" width="120" />
                <el-table-column prop="whi" label="WHI" width="120" />
                <el-table-column prop="previousMilk" label="前奶量(Kg)" width="120" />
                <el-table-column prop="previousSomaticCellCount" label="前体细胞(万/ml)" width="150" />
                <el-table-column prop="previousSomaticCellGrade" label="前体细胞分" width="120" />
                <el-table-column prop="previousMilkLoss" label="前奶损失(Kg)" width="120" />
                <el-table-column prop="peakMilk" label="高峰奶(Kg)" width="120" />
                <el-table-column prop="peakDay" label="高峰日(天)" width="120" />
                <el-table-column prop="milkIn305" label="305奶量(Kg)" width="120" />
                <el-table-column prop="totalProduction" label="总奶量(Kg)" width="120" />
                <el-table-column prop="totalFat" label="总乳脂(%)" width="120" />
                <el-table-column prop="totalProtein" label="总蛋白(%)" width="120" />
                <el-table-column prop="adultEquivalent" label="成年当量(Kg)" width="120" />
                <el-table-column label="操作" fixed="right" width="70">
                    <template #default="{ $index }">
                        <el-button type="danger" icon="Delete" size="small" @click="delTableRow($index)" />
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelHandler">取消</el-button>
                <el-button type="primary" @click="confirmHandler">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'
// import { reqUploadCowRecord, reqSaveCowRecord } from '@/api/cattleStructure'
import { reqUploadRecordList, reqSaveRecordList } from '@/api/daily'

let props = defineProps(['isShowUpload'])
let $emit = defineEmits(['closeUploadDrawer'])
let cattleType = ref('1')
let tableData = ref([])

// 取消按钮
const cancelHandler = () => {
    $emit('closeUploadDrawer', false)
    tableData.value = []
}

// 保存按钮
const confirmHandler = async () => {
    let res = await reqSaveRecordList(tableData.value)
    console.log('保存按钮', res)
    if(res.status == 200){
        ElMessage({
            type: 'success',
            message: '导入成功'
        })
        $emit('closeUploadDrawer', false)
        tableData.value = []
    }
}

// 点击下载模板按钮
const downLoadTemplate = () => {
    let url = 'https://cos.iimpc.cn/template/DHI%E5%8F%96%E6%A0%B7%E8%AE%B0%E5%BD%95%E6%A8%A1%E7%89%88%E8%A1%A8.xls'
    let a = document.createElement("a")
	a.style = "display: none"
	a.target = "_blank"
	// a.download = "file"
	a.href = url
	document.body.appendChild(a)
	a.click()
	document.body.removeChild(a)
	URL.revokeObjectURL(url)
}

// 点击导入dhi记录（上传）
const onChange = (data) => {
    const loading = ElLoading.service({
        lock: true,
        text: '正在导入',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = data.raw
    const fd = new FormData()
    fd.append('file', file)
    reqUploadRecordList(fd).then((res) => {
        if(res.status == 200){
            tableData.value = res.data
            loading.close()
        }
    })
}

// 删除
const delTableRow = (index) => {
    tableData.value.splice(index, 1)
}
</script>

<style scoped lang="scss">
.el-radio-group{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.radio-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .radio-icon{
        margin-left: auto;
    }
    .radio-txt{
        color: #999;
        font-size: 12px;
        margin-left: 5px;
        cursor: pointer;
    }
}
:deep(.el-drawer__header){
    margin-bottom: 0 !important;
}
</style>